{% extends 'partial/layout.njk' %}

{% block body %}
  <header class='demos-header'>
    <a href='/'>
      <h1 class="demos-title">写任务</h1>
    </a>
    <p class="demos-sub-title">
      欢迎
      {{ user.name }}，每天进步一点点
    </p>
  </header>

  <div class="bd">
    <div class="page__bd">

      <form>

        <div class="weui-cells weui-cells_form">

          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label for="date" class="weui-label">日期</label>
            </div>
            <div class="weui-cell__bd">
              <input
                class="weui-input"
                id="date"
                name="date"
                placeholder="请输入日期"
                type="text"
                value="">
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label for="category" class="weui-label">类别</label>
            </div>
            <div class="weui-cell__bd">
              <input
                class="weui-input"
                id="category"
                name="category"
                placeholder="请输入类别"
                type="text"
                value="每日汇报">
            </div>
          </div>

          <div
            class="weui-cell"
            style="{% if category !== '服侍' %} display:none {% endif %}"
            id="serve">
            <div class="weui-cell__hd">
              <label for="netName" class="weui-label">服侍对象</label>
            </div>
            <div class="weui-cell__bd">
              <input
                class="weui-input"
                id="serveMember"
                name="serveMemberName"
                placeholder="请输入被服侍者"
                type="text"
                value=""
                data-values="">
            </div>
          </div>

        </div>

        <div class="weui-cells weui-cells_form">
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label for="title" class="weui-label">概要</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" placeholder="请输入概要" name="title" type="text">
            </div>
          </div>
        </div>

       <div class="weui-cell"
            style="{% if category !== '每日汇报' %} display:none {% endif %}"
            id = "report">
      <div class="weui-cell__hd">
              <label for="netName" class="weui-label">任务内容</label>
            </div>
            <div class="weui-cell__bd">
              尚未设定（无法改动）
            </div>
          </div>
       

        </div>

        <div class="weui-cells weui-cells_form">
          <div class="weui-cell">
            <div class="weui-cell__bd">
              <textarea class="weui-textarea" name="content" placeholder="请输入作业" rows="7"></textarea>
            </div>
          </div>
        </div>

        <div class="demos-content-padded">
          <button class="weui-btn weui-btn_primary" type="submit">确定</button>
        </div>

        <input type="hidden" name="memberId" value="{{member.id}}">
        <input type="hidden" name="memberNetName" value="{{member.netName}}">
        <input type="hidden" name="target" value="{{member.target}}">

      </form>

    </div>
  </div>

{% endblock %}

{% block script %}

  <script src="/public/js/jquery.serializejson.js"></script>
  <script src="/public/js/arteditor.min.js"></script>

  <script>
    $("#date").calendar();

    $('textarea')
      .each(function () {
        this.setAttribute('style', 'height:' + (
          this.scrollHeight
        ) + 'px;overflow-y:hidden;');
      })
      .on('input', function () {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
      });

    $("#serveMember").select(
      {title: "选择被服侍者", items: {{ serveMemberTree | dump | safe }}}
    );

    $("#category").select({
      title: "选择类别",
      items: ['服侍', '圣经学习', '医治释放','每日汇报']
    });

    $("#category").change(function () {
      var categoryStr = $(this).val();
      if (categoryStr == "服侍") {
        $("#serve").show();
      } else {
        $("#serve").hide();
        $("#serveMember").val('');
      }
    })

    $("#category").change(function () {
      var categoryStr = $(this).val();
      if (categoryStr == "每日汇报") {
        $("#report").show();
      } else {
        $("#report").hide();
      }
    })

    $("form").submit(function (event) {
      $.showLoading();

      event.preventDefault();

      var formData = $(this).serializeJSON();
      formData.content = formData
        .content
        .replace(/\r\n/ig, "<br>");
      formData.serveMemberId = $('#serveMember').data("values");

      $.post('/task/create', formData, function (data) {
        window.location = data.location;
      });
    });
  </script>
{% endblock %}